<template>
    <view class="my-content">
        <view class="mar">
            <view class="context_item">
                <image class="image1" :src='serverImageUrl("/static/images/index/WX20230607-235102@2x.png")'
                       style="height: 87.08rpx;width: 87.08rpx;"></image>
                <view class="pop">
                    啊啊
                    <view class="arrow"></view>
                </view>
            </view>

            <view class="context_item_right">
                <view class="pop_left">
                    版本
                    <view class="arrow_left"></view>
                </view>
                <image class="image1" :src='serverImageUrl("/static/images/index/WX20230607-235102@2x.png")'
                       style="height: 87.08rpx;width: 87.08rpx;"></image>
            </view>
        </view>

        <view class="bottom_input">
            <image :src='serverImageUrl("/static/images/message/yuyin.png")' style="height: 45.35rpx;width: 45.35rpx"></image>
            <input v-model="text" class="input" @confirm="sendTextMsg()"></input>
            <!--<image :src='serverImageUrl("/static/images/message/biaoqing.png")' style="height: 45.35rpx;width: 45.35rpx"></image>-->
            <image :src='serverImageUrl("/static/images/message/icon_tianjia.png")' style="height: 45.35rpx;width: 45.35rpx"></image>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            to_user: '',
            to_user_username: '',
            from_user: {},
            text: ''
        };
    },
    onLoad(options) {
        this.getUserInfo()
        this.to_user = options.to_user
        this.to_user_username = options.to_user_username
    },
    onReady() {
        uni.setNavigationBarTitle({
            title: this.$t("用户昵称")
        })
    },
    methods: {
        getUserInfo() {
            const that = this
            that.$u.api.user.getUserInfo().then(res => {
                that.from_user = res
                uni.setNavigationBarTitle({
                    title: that.from_user.username
                })
                console.log('user-info', res)
            })
        },
        sendTextMsg() {
            const that = this
            console.log(that.to_user)
            that.$u.api.message.sendMsgText({
                from_user: that.from_user.mobile,
                to_user: that.to_user,
                text: that.text
            }).then(res => {
                // 更新聊天记录
                that.text = ''
                that.getMsgList()
            })
        },
        getMsgList(){
            const that = this
            that.$u.api.message.getMsgList({
                from_user: that.from_user.mobile,
                to_user: that.to_user
            }).then(res => {
                // 更新聊天记录
                that.text = ''
            })
        }
    },
}
</script>

<style lang="scss">
.my-content {
  display: flex;
  flex-direction: column;
  padding: 36.63rpx;
  height: 93.4vh;
  overflow: scroll;
  background-color: $my-bgColorF6F6F6;

  .context_item {
    display: flex;
    flex-direction: row;
    margin-top: 54.2rpx;

    view {
      background: #FFFFFF;
      box-shadow: 0rpx 16rpx 49rpx 14rpx rgba(0, 0, 0, 0.05), 0rpx 10rpx 28rpx 0rpx rgba(0, 0, 0, 0.08);
    }

    .image1 {
      margin-right: 44.42rpx;
    }

  }

  .context_item_right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 54.2rpx;

    view {
      //background: #FFFFFF;
      box-shadow: 0rpx 16rpx 49rpx 14rpx rgba(0, 0, 0, 0.05), 0rpx 10rpx 28rpx 0rpx rgba(0, 0, 0, 0.08);
    }
  }
}

/*气泡*/
.pop {
  width: 500rpx;
  word-wrap: break-word;
  border-radius: 20rpx;
  padding: 15.7rpx 31.44rpx 15.7rpx 31.44rpx;
}


.pop_left {
  width: 500rpx;
  margin-right: 44.42rpx;
  word-wrap: break-word;
  border-radius: 20rpx;
  padding: 15.7rpx 31.44rpx 15.7rpx 31.44rpx;
  background-color: #28C807;
}

.bottom_input {
  height: 150rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -2rpx 7rpx 0rpx rgba(172, 172, 172, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mar {
  margin-bottom: 150rpx;
}

.input {
  width: 497rpx;
  height: 56rpx;
  background: #E3E3E3;
  border-radius: 9rpx;
  padding: 10rpx;
}
</style>
